<template>
	<view style="width: 100%;background-color: #FFFFFF;padding-top: 10px;">
		
		<input class="uni-input department-manager-input" name="input" placeholder="输入姓名或手机号码" v-model="inputsearchVal"
					 @focus="focus" @blur="blur" />
		<view class="invite-colleagues pB10">
			<view class="invite-colleagues-text">如果该同事尚未加入，请点击按钮</view>

			<view class="invite-colleagues-bnt" @click="invite">转发邀请</view>
			<view class="invite-colleagues-bnt" @click="sharecode">扫码邀请</view>
		</view>
		<view class="seach-view" v-if="seachrlistchanger">
			<view class="tips-text f14 mL10">您可能想找</view>
			<nodata v-if="searchlist.likepeople.length==0"></nodata>
			<view class="colleagues" v-for="(item,index) in searchlist.likepeople">
				<!-- <view class="colleagues-tips">您可能想找</view> -->
				<view class="colleagues-tip">
					<image class="headimg" :src="item.headimgurl"></image>
				</view>
				<view class="colleagues-right">
					<view class="colleagues-message">
						<view class="phone-number">{{item.mobile}}</view>
						<view class="name">(姓名:{{item.name}})</view>
						<view class="colleagues-company">{{item.company_name}}</view>
					</view>
					<view class="colleagues-add">
						<view class="colleagues-add-bnt" v-if="item.deptid == detaildata.id" :class="item.deptid == detaildata.id ?'colleagues-isadd':''" >该部门员工</view>
					    <view class="colleagues-add-bnt" v-else-if="item.companyid == detaildata.companyid" :class="item.companyid == detaildata.companyid ?'colleagues-isadd':''" >该公司员工</view>
						<view class="colleagues-add-bnt" v-else :class="item.deptid == detaildata.id ?'colleagues-isadd':''" @click="addpersonnel(item.id,index,'search')">添加</view>
						<!-- <view class="colleagues-dep" v-if="item.dept_name!=null">{{item.dept_name}}</view> -->
						<!-- <view class="colleagues-add-bnt">添加</view> -->
					</view>
				</view>
			</view>
			<view class="tips-text f14 mL10">联系人</view>
			<nodata v-if="searchlist.likemobile.length==0"></nodata>
			<view class="colleagues" v-for="(item,index) in searchlist.likemobile">
				<!-- <view class="colleagues-tips">您可能想找</view> -->
				<view class="colleagues-tip">
					<image class="headimg" :src="item.headimgurl"></image>
				</view>
				<view class="colleagues-right">
					<view class="colleagues-message">
						<view class="phone-number">{{item.mobile}}</view>
						<view class="name">(姓名:{{item.name}})</view>
						<view class="colleagues-company" v-if="item.company_name!=null">{{item.company_name}}</view>
						<view class="colleagues-company" v-else>----</view>
					</view>
					<view class="colleagues-add">
						<view class="colleagues-add-bnt" v-if="item.deptid == detaildata.id" :class="item.deptid == detaildata.id ?'colleagues-isadd':''" >该部门员工</view>
						  <view class="colleagues-add-bnt" v-else-if="item.companyid == detaildata.companyid" :class="item.companyid == detaildata.companyid ?'colleagues-isadd':''" >该公司员工</view>
						<view class="colleagues-add-bnt" v-else :class="item.deptid == detaildata.id ?'colleagues-isadd':''" @click="addpersonnel(item.id,index)">添加</view>
						<!-- <view class="colleagues-dep" v-if="item.dept_name!=null">{{item.dept_name}}</view> -->
						<!-- <view class="colleagues-add-bnt">添加</view> -->
					</view>
				</view>
			</view>
			
			
			
		</view>
		
		 
		<view class="colleagues" v-for="(item,index) in showlist" v-if="showlistchanger">
			<view class="colleagues-tip">
				<image class="headimg" :src="item.headimgurl"></image>
			</view>
			<view class="colleagues-right">
				<view class="colleagues-message">					
					<view class="phone-number">{{item.mobile}}</view>
					<view class="name">(姓名:{{item.name}})</view>
					<view class="colleagues-company">{{item.company_name}}</view>					
				</view>
				<view class="colleagues-add">
					<view class="colleagues-add-bnt" v-if="item.deptid == detaildata.id" :class="item.deptid == detaildata.id ?'colleagues-isadd':''" >该部门员工</view>
					 <view class="colleagues-add-bnt" v-else-if="item.companyid == detaildata.companyid" :class="item.companyid == detaildata.companyid ?'colleagues-isadd':''" >该公司员工</view>
					<view class="colleagues-add-bnt" v-else :class="item.deptid == detaildata.id ?'colleagues-isadd':''" @click="addpersonnel(item.id,index,'search')">添加</view>
				</view>
			</view>
		</view>
		<view class="bnt">
			<view class="refresh" @click="thisrefresh()">刷新</view>
			<view class="bnt-add" @click="backconfirm()">返回</view>
		</view>
		
		<view class="w100 tRight sharewindow" v-if="sharein" @click="hideshare()">
			<img class="w60 pR10" src="../../static/img/share.png" ></img>
		</view>
		<!-- 授权确认 -->
		<view mode="top-right" class="scan-box" v-if="authorization">
			<view class="scan-item">
				<view class="scan-content">
					<view class="scan-icon">
						<image src="../../static/slide-list/icon-scan.png" class="scan-icon-img"></image>
					</view>
					<image src="../../static/slide-list/fork.png" class="scan-btn" @click="cancelEvent"></image>
					<!-- <image :src="img" class="scan-img"></image> -->
					
					<view class="qrcode scan-img">
						<tki-qrcode  cid="qrcode" ref="qrcode" :val="showval" :size="size" :onval="onval" :loadMake="loadMake" :usingComponents="true" @result="qrR" />
						
					</view>
					<view class="scan-text" style="bottom: 20upx;">						
						请扫码加入
					</view>
				</view>
			</view>
		</view>
		<!-- 底部导航 -->
		<footernav pagePath='user'></footernav>
	</view>
</template>

<script>
	import {deptuseradd} from '@/common/api/department.js'; //引进requst方法
	import {userman,userlist,userinfo} from '@/common/api/user.js'
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	
		import tkiQrcode from '@/components/tki-qrcode/tki-qrcode.vue';	
// #ifdef H5 
	import {wexinshare} from '@/common/wechatshare.js';
	// #endif
	export default {
		mixins: [MescrollMixin], // 使用mixin
		components: {
			tkiQrcode
		},
		data() {
			return {
				showval:'',
				showshare:false,
				inputstate:false,
				ifShow: true,
				val: '二维码', // 要生成的二维码值
				size: 350, // 二维码大小
				unit: 'upx', // 单位
				onval: true, // val值变化时自动重新生成二维码
				loadMake: true, // 组件加载完成后自动生成二维码
				sharein:false,
				isadd:-1,
				addtips:'添加',
				authorization:false,
				seachrlistchanger:false,
				showlistchanger:true,
				inputsearchVal:'',
				active: false,
				showlist:[],
				searchlist:[],
				deptid:"",
				detaildata:"",
				page:0,
				pagesize:10,
				searchpagesize:10,
				downOption:{
					auto: false,
					page:{
						size:10
					}
				},
				upOption:{
					auto:false
				},
				requestchanger:true,
				count:0,
				needpage:0,
				userinfodata:"",
			};
		},
		onLoad(event) {
			// return
			try {
				this.detaildata = JSON.parse(decodeURIComponent(event.detaildata));
				console.log(this.detaildata);
			} catch (error) {
				this.detaildata = JSON.parse(event.detaildata);
				console.log(this.detaildata);
			}
			this.id = this.detaildata.id;
			console.log(this.detaildata)
			// userindexlist({deptid:this.id}).then(res=>{
			// 	console.log(res)
			// })
			// alert(this.detaildata.companyid)
			userman({
				conType:'con',
				offset:this.page,
				length:this.pagesize
			}).then(res=>{
				this.showlist = res.data.userdata
			})
			
			userinfo({}).then(res=>{//获取用户信息
				this.userinfodata=res.data.data
				
			
				
				this.userdata=res.data.data;
				
				setTimeout(()=>{
						// this.creatQrcode();							
						this.showtimes();//开始计时
						
				},500)
				
			})
		},
		 watch: {
		    inputsearchVal(newName, oldName) {
				if(this.inputsearchVal == ''){
					this.showlistchanger = true
					this.seachrlistchanger = false
				}else{
					this.seachrlistchanger = true
					this.showlistchanger = false
					this.search(newName)
				}
		      }
		    },
		methods: {
			creatQrcode() {
				this.$refs.qrcode._makeCode()
			},
			cancelEvent(){
				this.visible = false
				this.authorization=false
			},
			backconfirm(){
				this.backrefresh('123')
			},
			thisrefresh(){
				this.page=0;
				userman({
					conType:'con',
					offset:this.page,
					length:this.pagesize
				}).then(res=>{
					this.showlist = res.data.userdata
				})	
			},
			search(e, val) {
				this.screenName = e
				userlist({
					keyword:this.inputsearchVal,
					offset:0,
					length:500
					}).then(res=>{
					this.searchlist = res.data.data
				})
			
			},
			focus() {
				this.active = true;
			},
			blur() {
				this.isFocus = false;
				if (!this.inputVal) {
					this.active = false;
				}
			},
		/*下拉刷新的回调*/
			downCallback(){
				this.getlistrequest()
			},
		/*上拉加载的回调*/
			upCallback(page) {
			// this.mescroll.endSuccess(this.getlist.length, this.requestchanger);
				this.getlistrequest()
			},
			getlistrequest(){
				this.page++
				userman({
					conType:'con',
					offset:this.showlist.length,
					length:this.pagesize
				}).then(res=>{
				for (let i = 0; i < res.data.userdata.length; i++) {
					this.showlist.push(res.data.userdata[i])
				}
				this.mescroll.endSuccess(res.data.count,this.requestchanger)
				if(this.showlist.length >= this.count){
					this.requestchanger = false
				}
				})
			},
			hideshare(){
				this.sharein=false;
			},
			sharecode(){
				this.authorization=true;
				let detail={
					deptid:this.detaildata.id,
					departname:this.detaildata.departname,
					companyid:this.detaildata.companyid,
					is_m:this.detaildata.type
				}
				this.showval=this.weixinhttpurl+'/#/pages/Departmentmanagement/sharedepartment?detailDate=' + encodeURIComponent(JSON.stringify(detail))+'&sharecode='+this.userinfodata.sharecode;
				this.creatQrcode();
				
			},
			invite(){
				// uni.reLaunch({
				// 	url: './inviteColleagues'
				// });
				this.sharein=true;
				uni.showToast({
				    title:  '点击右上角进行分享',
				    duration: 2000,
					icon:'none'
				});
				
				let detail={
					deptid:this.detaildata.id,
					departname:this.detaildata.departname,
					companyid:this.detaildata.companyid,
					is_m:this.detaildata.type
					
				}
				let username=uni.getStorageSync('username');
				var title="邀请加入";
				let desccontent=username+"邀请您加入"+this.detaildata.departname+"部门,请点击查看";
				var url=this.weixinhttpurl+'/#/pages/Departmentmanagement/sharedepartment?detailDate=' + encodeURIComponent(JSON.stringify(detail))+'&sharecode='+this.userinfodata.sharecode;
				var img='https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2267186809,1206764244&fm=26&gp=0.jpg';
				var sharedata={
					title:title,
					desc:desccontent,
					img:img,
					link:url
				}
				// #ifdef H5 
				wexinshare(sharedata)//微信分享
				// #endif
			},
			/*type search -搜*/
			addpersonnel(id,index,type=''){
				deptuseradd({uid:id,deptid:this.detaildata.id,}).then(res=>{
					console.log(res)
					if(res.data.code == 200){
						uni.showToast({
						    title: res.data.message,
						    duration: 2000,
							icon:'none'
						});
						if(type == 'search')
						{
							console.log(this.searchlist)
							return 
							this.searchlist[index].deptid = this.detaildata.id
							return 
						}
						this.showlist[index].deptid = this.detaildata.id
					}else{
						uni.showToast({
						    title:  res.data.message,
						    duration: 2000,
							icon:'none'
						});
					}
					
					this.isadd = true
				})
			},
		},
		onShow() {
			
			
		}
	};
</script>

<style lang="scss" scoped>
.sharewindow{position:fixed;z-index: 999;top: 0px;right: 0;height: 100%;background-color: rgba(0,0,0,0.4);}
.seach-view{
	.tips-text{
		width: 100%;
		color: #808080;
	}
}
.department-name {
	display: flex;
	align-items: center;
	margin: 10px;
	border-bottom: 1px solid #eee;
}
.department-manager {
	margin: auto;
	text-align: center;
	color: rgba(166, 166, 166, 1);
	font-size: 12px;
}
.department-manager-input {
    border-radius: 10px;
    margin-top: 10px;
    border: 1px solid #eee;
    width: 90%;
    margin: auto;
    background: #dedede;
}
.invite-colleagues {
	color: rgba(166, 166, 166, 1);
	font-size: 12px;
	display: flex;
	align-items: center;
	text-align: center;
	margin-top: 20px;
}
.invite-colleagues-bnt {
	width: 71px;
	height: 28px;
	color: rgba(255, 255, 255, 1);
	background-color: rgba(42, 130, 228, 1);
	border-radius: 18px;
	line-height: 28px;
	font-size: 12px !important;
	margin-right: 5px;
}
.invite-colleagues-text {
	margin: auto;
}
.colleagues {
	width: 100%;
	display: flex;
	align-items: center;
	padding: 18px 0;
	.colleagues-tip {
		width: 55px;
		height: 55px;
		left: 5px;
		top: 313px;
		color: rgba(80, 80, 80, 1);
		// background-color: rgba(153, 153, 153, 1);
		border-radius: 28px;
		margin-left: 10px;
		.headimg{
			width:60px;
			height: 60px;
			border-radius: 60%;
			// position: relative;
			// top: -20px;
		}
	}
	.colleagues-right {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 77%;
		margin-left: 20px;
		border-bottom: 1px solid #eee;
		padding-bottom: 10px;
		.name {
			color: rgba(80, 80, 80, 1);
			font-size: 14px;
			// left: 49.999%;
			// position: relative;
			// top: -26px;
		}
		.phone-number {
			
			color: rgba(80, 80, 80, 1);
			font-size: 16px;
			font-weight: bold;
		
		}
		.colleagues-company {
			// position:relative;
			// top: -20px;
			color: #9c9c9c;
			font-size: 14px;
			line-height: 1.4;
			
		}
		.colleagues-message{
			width: 100%;
		}
		.colleagues-add {

			.colleagues-add-bnt {
				position: relative;
				left: -20px;
				width: 70px;
				height: 27px;
				color: rgba(255, 255, 255, 1);
				background-color: rgba(42, 130, 228, 1);
				border-radius: 18px;
				font-size: 11px;
				line-height: 27px;
				text-align: center;
				margin-left: auto;

			}
			.colleagues-isadd{
				background-color: rgba(179,179,179,1);
			}
		}
	}
}
.colleagues-name {
	color: rgba(80, 80, 80, 1);
	display: flex;
	margin-left: 10px;
	font-size: 15px;
}
.bnt {
	// color: rgba(255, 255, 255, 1);
	font-size: 15px;
	display: flex;
	justify-content: space-between;
	width: 70%;
	margin: auto;
	color: white;
	margin-top: 30px;
	margin-bottom: 10px;
	.bnt-add {
		background-color: rgba(42, 130, 228, 1);
		border-radius: 8px;
		line-height:42px;
		width: 110px;
		text-align: center;
		// padding: 5px 35px;
	}
	.refresh {
		background-color: rgba(42, 130, 228, 1);
		border-radius: 8px;
		line-height:42px;
		width: 110px;
		text-align: center;
		// padding: 5px 35px;
	}
}

.scan-box{
		display:block;
		position:fixed;
		top:0;
		bottom:0;
		left:0;
		right:0;
		background-color:rgba(0, 0, 0, 0.3);
		z-index:99999;
	}
	.scan-item{
		display:-webkit-box;
		display:-webkit-flex;
		display:-ms-flexbox;
		display:flex;
		position:relative;
		margin:0 auto;
		width:80%;
		height:100%;
		-webkit-box-pack:center;
		-webkit-justify-content:center;
		-ms-flex-pack:center;
		justify-content:center;
		-webkit-box-align:center;
		-webkit-align-items:center;
		-ms-flex-align:center;
		align-items:center;
		-webkit-box-sizing:border-box;
		box-sizing:border-box;
		opacity:1;

	}
	.scan-content{
		position:relative;
		width: 460upx;
		height: 550upx;
		background: #FFFFFF;
		border-radius: 20upx;
	}
	.scan-icon{
		position: absolute;
		top: -50upx;
		left: 180upx;
		width: 100upx;
		height: 100upx;
		border-radius: 100%;
		box-sizing:border-box;
		background: #FFFFFF;
		padding: 20upx;
	}
	.scan-icon-img{
		width: 100%;
		height: 100%;
	}
	.scan-text{
		position: absolute;
		bottom: 40upx;
		left: 0;
		width: 100%;
		text-align: center;
		font-size: 14px;
	}
	.scan-share{
		width: 100%;
		height: 100%;
	}
	.scan-img{
		width: 300upx;
		height: 300upx;
		margin: auto;
		display: block;
		position: absolute;
		top: 60upx;
		left: 50upx;
		z-index: 99;
	}
	.scan-btn{
		top:-30upx;
		left:auto;
		right:-30upx;
		bottom:auto;
		position:absolute;
		width:64upx;
		height:64upx;
		border-radius:50%;
		z-index:99999;
		display: flex;
	}
</style>
